@charset "utf-8";

.info-list{
    width: 880px;
}
.info-aside{
    width: 300px;
}

// vertical list
.vertical-list{
    background-color: $white;
    padding-bottom: 5px;
    .list-container{
        margin: 10px 0;
    }
    .list-item{
        float: none;
        background-color: $white;
        display: table;
        width: 100%;
        table-layout: fixed;
    }
}
.retention-ele{
    @include prefixer-value(transform,translate3d(0,0,0),o ms moz webkit);
    opacity: 1;
    &:nth-child(n+3){
        @include transition(transform 0.5s ease-out 0s,opacity 0.5s ease-out 0s);
    }
}
.retention-ele.movedown-retention{
    opacity: 0;
    @include prefixer-value(transform,translate3d(0,50%,0),o ms moz webkit);
}
.list-container{
    .item-info,.item-author{
        display: table-cell;
        vertical-align: middle;
        table-layout: fixed;
        overflow: hidden;
    }
    .item-img{
        width: 100%;
        height: 240px;
        a.fr-img{
            box-sizing: border-box;
            display: block;
            width: 100%;
            height: 230px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.25);
            border: 5px solid $white; 
            overflow: hidden;
            position: relative;
            vertical-align: middle;
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100% auto;
            &:before{
                content: "";
                position: absolute;
                display: block;
                left: 0;
                left: -100%;
                top: 0;
                width: 100%;
                height: 100%;
                background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
                background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
                transform: skewx(-25deg);
                -o-transform: skewx(-25deg);
                -moz-transform: skewx(-25deg);
                -webkit-transform: skewx(-25deg);
            }
            &:hover:before{
                left: 100%;
                -moz-transition: left 0.5s ease-out 0s;
                -o-transition: left 0.5s ease-out 0s;
                -webkit-transition: left 0.5s ease-out 0s;
                transition: left 0.5s ease-out 0s;
            }
        }
        img{
            vertical-align: middle;
            background-color: $white;
            width: 100%;
            height: auto;
            max-height: none !important;
        }
    }
    .item-info{
        vertical-align: top;
        padding: 0 $defaultMargin*2;
        position: relative;
        line-height: 2;
        h3{
            margin-bottom: $defaultMargin;
            a{
                font-size: 16px;
                color: $defaultColor;
                font-weight: bold;
                &:hover{
                    color: $themeColor;
                }
            }
        }
        .item-like{
            position: absolute;
            right: 10px;
            top: 5px;
            i{
                color: #f46f72;
            }
        }
        .item-content{
            margin-top: $defaultMargin;
            text-indent: 0;
            font-size: 14px;
            line-height: 1.5;
            color: $defaultColor;
            word-wrap:break-word;
            word-break: break-all;
            p,strong,span,a,blockquote{
                display: inline;
                padding: 0;
                margin: 0;
                text-indent: 0;
            }
            a.append-more{
                display: inline-block;
                float: right;
                margin-top: 0;
                &:hover{
                    color: $themeHoverColor;
                }
            }
        }
    }
    .item-author{
        vertical-align: top;
        width: 194px;
        height: 391px;
        background: url(../img/news_left_line.png) no-repeat right top;
        .info-author{
            text-align: center;
            padding-right: 60px;
        }
        a.author-shortcut{
            border-radius: 50%;
            width: 65px;
            height: 65px;
            margin-right: 5px;
            overflow: hidden;
            display: inline-block;
            text-align: center;
            img{
                display: inline-block;
                vertical-align: middle;
                max-height: 100%;
                max-width: 100%;
            }
        }
        strong,small{
            color: $defaultColor;
            display: block;
            font-weight: normal;
        }
        strong{
            font-size: $TitFontSize;
        }
        small{
            font-size: 12px;
        }
        .info-label{
            color: $white;
            display: block;
            width: 150px;
            height: 30px;
            line-height: 30px;
            text-indent: 20px;
            margin-bottom: 10px;
            background: url(../img/bgpink.png) no-repeat left top;
            span{
                color: $white;
                padding: 0;
                display: inline-block;
            }
            a{
                color: $white;
                text-decoration: none;
                display: block;
            }
        }
    }
    .search-highlight { 
        color : red; 
        font-weight: bold; 
    }
}


//aside
.info-aside{
    h3{
        background-color: $grayLightColor;
        margin: 0;
        padding: 0;
        font-size: 0;
        span{
            background-color: $white;
            display: inline-block;
            line-height: 1;
            font-size: 16px;
            padding-right: $defaultMargin;
        }
    }
}

#classify{
    .classify-menu{
        margin-top: 10px;
        border-bottom: 1px solid $grayLightColor;
        a{
            text-decoration: none;
            text-align: center;
            display: block;
            padding: 5px 0;
            border-style: solid;
            border-width: 1px 1px 0 1px;
            border-color: $grayLightColor;
            &:hover,&.curTag{
                color: $pageActiveColor;
            }
            &.notCurTag{
                color: $defaultColor;
            }
        }
    }
}
#hotArticle{
    li{
        border-bottom: 1px solid $grayLightColor;
        &:last-child{
            border-bottom: none;
        }
    }
    .hot-list{
        display: block;
        padding: 5px 0;
        &:hover{
            .hot-list-content{
                .hot-cont-tit,p{
                    color: $themeColor;
                }
            }
        }
    }
    .hot-list-img{
        float: left;
        width: 75px;
        height: 75px;
        position: relative;
        img{
            @include imgCenter;
        }
    }
    .hot-list-content{
        float: right;
        width: 215px;
        color: $defaultColor;
        .hot-cont-tit{
            font-size: 14px;
        }
        .hot-cont-foot,p{
            word-wrap: break-word;
            word-break: break-all;
            font-size: 12px;
        }
        .hot-cont-foot{
            i{
                color: $defaultColor;
                font-size: 12px;
                &:hover{
                    color: $defaultColor;
                }
            }
        }
    }
}

#newArticle{
    .new-article{
        color: $defaultColor;
        margin-bottom: 10px;
    }
    .new-list-img{
        color: $defaultColor;
        position: relative;
        display: block;
        width: 100%;
        height: 180px;
        overflow: hidden;
        .new-img-box{
            display: inline-block;
            width: 100%;
            height: 100%;
            img{
                width: 100%;
                min-height: 100%;
            }
        }
        .new-list-box{
            width: 100%;
            height: 100%;
            img{
                @include imgCenter;
            }
        }
        &:hover{
            span{
                color: $defaultColor;
            }
            .new-list-scan{
                background-color: rgba(255,255,255,0.8);
                opacity: 1;
                .scan-info{
                    transform: translate3d(0,0%,0);
                }
                .scan-num1{
                    transform: translate3d(0,0%,0);
                }
                .scan-num2{
                    transform: translate3d(0,0%,0);
                }
            }
        }
        .new-list-scan{
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            text-align: center;
            background-color: rgba(255,255,255,0);

            opacity: 0;
            transition: opacity 0.3s ease-in-out 0s,background-color 0.3s ease-in-out 0s;
            .scan-info{
                transform: translate3d(0,100%,0);
                transition: transform 0.25s ease-in-out 0.05s;
            }
            .scan-num1{
                transform: translate3d(0,100%,0);
                transition: transform 0.25s ease-in-out 0.1s;
            }
            .scan-num2{
                transform: translate3d(0,100%,0);
                transition: transform 0.25s ease-in-out 0.15s;
            }
            span{
                display: inline-block;
                font-size: 12px;
                color: $defaultColor;
                margin-right: 10px;
                line-height: 1.5;
                height: 26px;
                i{
                    font-size: 12px;
                    color: $defaultColor;
                }
            }
        }
    }
    .new-list-author{
        border-width: 0 1px 1px 1px;
        border-style: solid;
        border-color: $grayLightColor;
        padding: 10px;
        font-size: 14px;
        a{
            text-decoration: none;
            line-height: 24px;
            display: inline-block;
            img{
                width: 24px;
                height: 24px;
            }
        }
        span{
            display: inline-block;
        }
        .new-author-shortcut{
            display: inline-block;
            height: 24px;
            width: 24px;
        }
        .new-article-belong{
            float: right;
        }
    }
}